import React, {useEffect, useState} from 'react';
import {useLocation, useNavigate} from "react-router-dom";

import './index.css';
import {Input, message, Pagination, Spin} from "antd";
import http from "../../../util/http";
import defaultImg from './image/default.png'

const {Search} = Input;

function Propject(props) {
    let navigate = useNavigate();
    const location = useLocation();
    const state = location.state || {}
    const params = state.params || {}
    const dirId = params.dirId || -1;
    const [data, setData] = useState([]);
    const [total, setTotal] = useState(0)
    const [loading, setLoading] = useState(false);
    const [search,setSearch] = useState("")
    const [page, setPage] = useState({
        total: 0,
        pageNum: 1,
        pageSize: 10
    });
    useEffect(() => {
        setLoading(true)
        http.doPost('/doc/getdoc', {category: dirId, pageSize: page.pageSize, pageNum: page.pageNum,search: search}).then(res => {
            if (res.status === 200) {
                setData(res.data.list)
                setTotal(res.data.totalCount)
            }
            setLoading(false)
        }).catch(reason => {
            message.error(reason.message)
            setLoading(false)
        })
    }, [page, dirId,search])

    function openUrl(docId) {
        if (docId && docId !== "") {
            navigate('/portal/details?hiddenLeft=1', {
                state: {docId, page: state.page, text: state.text,params:params}
            });
        }
    }

    const onChange = (current, pageSize) => {
        setPage({
            pageNum: current,
            pageSize: pageSize
        })
    };

    const onSearch = (value) => {
        if (!loading) {
            setSearch(value)
        }
    }

    return (
        <div className="portal-project-main">
            <Search
                placeholder="请输入查询内容"
                allowClear
                enterButton="查询"
                size="large"
                onSearch={onSearch}
                disabled={loading}
                style={{ width: 304,float:'right',marginBottom:20}}
            />
            <div style={{clear: "both"}}/>
            <Spin spinning={loading}>
                <div className="portal-project-table">
                    {
                        data && data.map((item, index) => {
                            let imgUrl;
                            if (item.imgUrl && item.imgUrl !== "") {
                                imgUrl = item.imgUrl
                            }else {
                                imgUrl = defaultImg
                            }
                            return (
                                <div className="portal-project-item" key={index} onClick={() => openUrl(item.id)}>
                                    <div className="portal-project-item-img">
                                        <img src={imgUrl} style={{width: "100%", height: "100%"}} alt=""/>
                                    </div>
                                    <div className="portal-project-item-text" title={item.docSubject}>
                                        <span>{item.docSubject}</span>
                                    </div>
                                </div>
                            )
                        })
                    }
                </div>
                <div className="portal-project-pagination">
                    <Pagination
                        showSizeChanger
                        showQuickJumper
                        showTotal={(total) => `共${total}条`}
                        current={page.pageNum}
                        pageSize={page.pageSize}
                        total={total}
                        hideOnSinglePage={false}
                        onChange={onChange}
                    />
                </div>
            </Spin>
        </div>
    );
}

export default Propject;